.flip-container {
  position: relative;
  color:aliceblue;
  height: 100vh;
  transform-style: preserve-3d;
  perspective: 1000;
  transition: 0.6s;
}

.flip-container:hover {
  transform: rotateY(180deg);
}

.front {
  width: 100px;
  height: 180px;
  background-color: blueviolet;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  backface-visibility: hidden;
}

.back {
  width: 600px;
  height: 400px;
  background-color: cornflowerblue;
  position: absolute;
  transform: translate(-50%, -50%) rotateY(180deg);
  /* transform: rotateY(10deg); */
  left: 50%;
  top: 20%;
  backface-visibility: hidden;
  box-shadow:  -5px 5px 5px #aaa;
}


/* -------- */
/*
.animated2 {
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}

@-webkit-keyframes scaleIn {
  from {
      transform: scale(.2);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
      top: -100px
  }

  to {
      transform: scale(1);
      top: 200px
  }
}

@keyframes scaleIn {
  from {
      transform: scale(.2);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
      top: -100px
  }

  to {
      transform: scale(1);
      top: 200px
  }
}

.scaleIn {
  -webkit-animation-duration: .3s;
  animation-duration: 11.3s;
  -webkit-backface-visibility: visible!important;
  backface-visibility: visible!important;
  -webkit-animation-name: scaleIn;
  animation-name: scaleIn
}

@-webkit-keyframes scaleInY {
  from {
      transform: scaleY(0);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
      opacity: 0
  }

  to {
      transform: scaleY(1)
  }
}

@keyframes scaleInY {
  from {
      transform: scaleY(0);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
      opacity: 0
  }

  to {
      transform: scaleY(1)
  }
}

.scaleInY {
  -webkit-backface-visibility: visible!important;
  backface-visibility: visible!important;
  -webkit-animation-name: scaleInY;
  animation-name: scaleInY
}

@-webkit-keyframes scaleOutY {
  from {
      transform: scaleY(1)
  }

  to {
      transform: scaleY(0);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
      opacity: 0
  }
}

@keyframes scaleOutY {
  from {
      transform: scaleY(1)
  }

  to {
      transform: scaleY(0);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
      opacity: 0
  }
}

.scaleOutY {
  -webkit-animation-name: scaleOutY;
  animation-name: scaleOutY;
  -webkit-backface-visibility: visible!important;
  backface-visibility: visible!important
}

@-webkit-keyframes scaleOut {
  from {
      transform: scale(1) translate3d(0,0,0);
      opacity: 1
  }

  to {
      transform: scale(0) translate3d(0,-2000px,0);
      opacity: 0
  }
}

@keyframes scaleOut {
  from {
      transform: scale(1) translate3d(0,0,0);
      opacity: 1
  }

  to {
      transform: scale(0) translate3d(0,-2000px,0);
      opacity: 0
  }
}

.scaleOut {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-name: scaleOut;
  animation-name: scaleOut;
  -webkit-backface-visibility: visible!important;
  backface-visibility: visible!important
} */